export const structures = [
  { id: 1, name: 'single', value: 'SINGLE' },
  { id: 2, name: 'left right', value: 'LEFT_RIGHT' },
  { id: 3, name: 'left center right', value: 'LEFT_CENTER_RIGHT' },
  { id: 4, name: 'top bottom', value: 'TOP_BOTTOM' },
  { id: 5, name: 'top middle bottom', value: 'TOP_MIDDLE_BOTTOM' },
]

export const aligns = {
  'SINGLE': [
    { id: 5, name: 'center', value: 'center' },
  ],
  'TOP_BOTTOM': [
    { id: 1, name: 'left', value: 'left' },
    { id: 2, name: 'center', value: 'center' },
    { id: 3, name: 'right', value: 'right' },
  ],
  'TOP_MIDDLE_BOTTOM': [
    { id: 1, name: 'left', value: 'left' },
    { id: 2, name: 'center', value: 'center' },
    { id: 3, name: 'right', value: 'right' },
  ],
  'LEFT_RIGHT': [
    { id: 4, name: 'top', value: 'top' },
    { id: 5, name: 'middle', value: 'middle' },
    { id: 6, name: 'bottom', value: 'bottom' },
  ],
  'LEFT_CENTER_RIGHT': [
    { id: 4, name: 'top', value: 'top' },
    { id: 5, name: 'middle', value: 'middle' },
    { id: 6, name: 'bottom', value: 'bottom' },
  ],
}

export const baseds = [
  { id: 1, name: 'width', value: 'width' },
  { id: 2, name: 'height', value: 'height' },
]

export function genComponentsJson(structure) {
  const component = { graphicId: undefined, based: 'width', size: 1, margin: '0 0 0 0' }
  const group = {
    'SINGLE': { SINGLE: { ...component } },
    'LEFT_RIGHT': { LEFT: { ...component }, RIGHT: { ...component } },
    'LEFT_CENTER_RIGHT': { LEFT: { ...component }, CENTER: { ...component }, RIGHT: { ...component } },
    'TOP_BOTTOM': { TOP: { ...component }, BOTTOM: { ...component } },
    'TOP_MIDDLE_BOTTOM': { TOP: { ...component }, MIDDLE: { ...component }, BOTTOM: { ...component } },
  }
  return group[structure]
}

